<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
				<div class="team">
					<div class="powertop">
						<router-link class="powertopli" to="/team">我的团队</router-link>
						<router-link class="powertopli" to="/team/post">岗位管理</router-link>
						<router-link v-if="memid == 50481 || memid == 304676 || memid == 304672" class="powertopli" to="/team/func">功能定义</router-link>
						<router-link v-if="memid == 50481 || memid == 304676 || memid == 304672" class="powertopli  powertopact" to="/team/api">API定义</router-link>
					</div>
					<div class="powercon">
						<div class="powerbtn">
							<el-button type="danger" style="margin-right: 20px;" @click="newpersonlog = true">新建API</el-button>
						</div>
						<div class="powersearch">
							<el-input placeholder="API名称" v-model="teamname" class="input-with-select">
								<el-button @click="searchname" slot="append" icon="el-icon-search"></el-button>
							</el-input>
						</div>
					</div>
					<div class="powertable" v-loading="loading">
						<div class="powerlist">
							<div class="powerth" style="max-width: 50px;">ID</div>
							<div class="powerth">API名称</div>
							<div class="powerth">API地址</div>
							<div class="powerth">更新时间</div>
							<div class="powerth">备注说明</div>
							<div class="powerth">操作</div>
						</div>

						<div class="powerlist" v-for="item in list" :key="item.id">
							<div class="powertd" style="max-width: 50px;">{{item.id}}</div>
							<div class="powertd">{{item.name}}</div>
							<div class="powertd">{{item.route}}</div>
							<div class="powertd">{{item.updated_at}}</div>
							<div class="powertd">{{item.description}}</div>
							<div class="powertd">
								<el-button size="mini" type="primary" @click="fix(item.id,item.name,item.route,item.description)">修改</el-button>
								<el-button size="mini" type="primary" @click="delet(item.id,item.name)">删除</el-button>
							</div>
						</div>
						<div class="fenye">
							<el-pagination background layout="prev, pager, next" @current-change="fanye" :page-size="page_size" :total="total"></el-pagination>
						</div>
					</div>

					<el-dialog title="新建API" class="log" :visible.sync="newpersonlog" width="510px">
						<el-form ref="form" @submit.native.prevent :model="newperson" label-width="120px">
							  <el-form-item label="API名称">
							  		<el-input v-model="newperson.name"></el-input>
							  </el-form-item>
							  <el-form-item label="API地址">
							  		<el-input v-model="newperson.user"></el-input>
							  </el-form-item>
							  <el-form-item label="备注说明">
								<el-input type="textarea" v-model="newperson.desc"></el-input>
							  </el-form-item>
						</el-form>
					  <span slot="footer" class="dialog-footer">
						<el-button @click="newpersonlog = false">取 消</el-button>
						<el-button type="primary" @click="newpersongo">确 定</el-button>
					  </span>
					</el-dialog>

					<el-dialog title="修改API" class="log" :visible.sync="fixpersonlog" width="510px">
						<el-form ref="form" @submit.native.prevent :model="fixperson" label-width="120px">
							  <el-form-item label="API名称">
							  		<el-input v-model="fixperson.name"></el-input>
							  </el-form-item>
							  <el-form-item label="API地址">
							  		<el-input v-model="fixperson.user"></el-input>
							  </el-form-item>
							  <el-form-item label="备注说明">
								<el-input type="textarea" v-model="fixperson.desc"></el-input>
							  </el-form-item>
						</el-form>
					  <span slot="footer" class="dialog-footer">
						<el-button @click="fixpersonlog = false">取 消</el-button>
						<el-button type="primary" @click="fixpersongo">确 定</el-button>
					  </span>
					</el-dialog>

				</div>
			</div>
		</div>
		<!-- <foot></foot> -->
	</div>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name : "api",
		data(){
			return {
				teamname:"",

				loading:true,

				total:0,
				page:1,
				page_size:20,

				newpersonlog:false,
				newperson:{
					name:"",
					user:"",
					desc:""
				},
				fixpersonlog:false,
				fixperson:{
					id:"",
					name:"",
					user:"",
					desc:""
				},

				list:[]
			}
		},
		created() {
			this.getlist();
			var shop = JSON.parse(localStorage.getItem('USER'));
			this.memid = shop.id
		},
		mounted(){

		},
		methods: {
			//翻页
			fanye:function(val){
				this.page = val
				this.loading = true
				this.getlist()
			},
			//获取列表
			getlist:function(){
				axios.get('/api/routes/list?type=2&page='+this.page+'&page_size='+this.page_size+'&name='+this.teamname)
					.then(response => {
						if(response.data.msg.code == 0){
							this.list = response.data.data.data
							this.loading = false
							this.total = response.data.data.total
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//修改API
			fixpersongo:function(){
				var that = this
				var params = new URLSearchParams();
				params.append('id',this.fixperson.id);
				params.append('name',this.fixperson.name);
				params.append('route',this.fixperson.user);
				params.append('description',this.fixperson.desc);

				axios.post('/api/permission/operation_api', params)
				  .then(response => {
						if(response.data.msg.code == 0){
							this.fixpersonlog = false
							this.loading = true
							this.getlist();
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			},
			//修改API
			fix:function(id,name,route,description){
				this.fixperson.id = id
				this.fixperson.name = name
				this.fixperson.user = route
				this.fixperson.desc = description
				this.fixpersonlog = true
			},
			//删除API
			delet:function(id,name){
				this.$confirm('此操作将永久删除名称为"'+name+'"的API, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					var params = new URLSearchParams();
					params.append('id',id);
					axios.post('/api/permission/delete_api', params)
					  .then(response => {
							if(response.data.msg.code == 0){
								this.loading = true
								this.$message({
									type: 'success',
									message: '成功!'
								});
								this.getlist()
							}else{
								this.$message.error(response.data.msg.info);
							}
					  })
				})
			},
			//新建api
			newpersongo:function(){
				var that = this
				var params = new URLSearchParams();
				params.append('name',this.newperson.name);
				params.append('route',this.newperson.user);
				params.append('description',this.newperson.desc);

				axios.post('/api/permission/operation_api', params)
				  .then(response => {
						if(response.data.msg.code == 0){
							this.newpersonlog = false
							this.loading = true
							this.getlist();
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			},
			//搜索内容
			searchname:function(){
				this.loading = true
				this.getlist()
				this.teamname = ""
			},
		}
	}
</script>

<style lang="scss"  scoped="scoped">
	.index{
    .log input{ width: 250px !important;}
		.team{ background: #F9F9F9; border: 1px #F9F9F9 solid;}
		/deep/ .el-button--danger {
		     color: #FFF;
		     background-color: #2974FF;
		     border-color: #2974FF;
		 }
		
		.powertop {
		  display: flex;
		  background:#f9f9f9;
		}
		
		.powertopli {
		  flex-basis: 180px;
		  line-height: 50px;
		  border-bottom: 3px #F9F9F9 solid;
		  color: #727272;
		  border-right: 1px #F9F9F9 solid;
		  font-size: 16px;
		  text-align: center;
		}
		
		.powertopact {
		  background: #FFFFFF;
		  border-bottom: 3px #2974FF solid;
		}
		.powercon{ background: #FFFFFF; padding: 20px 40px; justify-content: space-between; display: flex;}
		.powerbtn{ flex-basis: 320px; display: flex;}
		.powersearch{ flex-basis: 250px;}
		.powerlist{ display: flex; line-height: 45px; text-align: center; }
		.powerth{ flex: 1; background: #E5E5E5; font-size: 14px; color: #666666; border-right: 1px #EAEAEA solid;}
		.th1{ flex-basis: 80px; max-width: 80px;}
		.powertd{ flex: 1; background: #FFFFFF; font-size: 14px; color: #888888; border-bottom: 1px #EAEAEA solid;border-right: 1px #EAEAEA solid;}
		.fenye{ text-align: right; margin: 20px 0;}
	}
</style>
